﻿

<html>
<head>
<title>CSS3 Border Test</title>

<style type="text/css">
h3 {border: aqua solid 50px;}
h4 {border: 5mm silver dashed;}
em {border: 0.5em dotted green;}
div {border: solid red;}
blockquote {border: 200%;}
</style>
</head>

<body>




<h1>CSS3 Border Test</h1>





<ul>
<li >
For "border", initial is (see individual properties), it applies to all elements,
it is not inherited, percentage values are N/A, it applies to visual media, and computed value
is "absolute values".
</li>
</ul>
<h2>
PASS CRITERIA:
</h2>

<p>
If statement above is correct, this paragraph should have the 
border determined by initial indivdual property values.  No specific CSS rules are applied.  However, the
border property does apply to the p element.  
This is extra text to test this more effectively.
This is extra text to test this more effectively.
This is extra text to test this more effectively.
This is extra text to test this more effectively.
This is extra text to test this more effectively.
This is extra text to test this more effectively.
This is extra text to test this more effectively.
This is extra text to test this more effectively.
</p>

<h3>
This h3 heading has a border of aqua solid 50px, but this <em>emphasized text
which may take up most of a line of text</em> has a border of 0.5em dotted green; the rules applied are:
"h3 {border: aqua solid 50px;}"
"em {border: 0.5em dotted green;}"
So the border property applies to the h3 and em elements.
This is extra text to test this more effectively.
This is extra text to test this more effectively.
This is extra text to test this more effectively.
This is extra text to test this more effectively.
This is extra text to test this more effectively.
This is extra text to test this more effectively.
This is extra text to test this more effectively.
This is extra text to test this more effectively.
</h3>
<h4>
This h4 heading has a border property of 5mm silver dashed (because of the
rule "h4 {border: 5mm silver dashed;}", 
So the border property does apply to the h4 element.
This is extra text to test this more effectively.
This is extra text to test this more effectively.
This is extra text to test this more effectively.
This is extra text to test this more effectively.
This is extra text to test this more effectively.
This is extra text to test this more effectively.
This is extra text to test this more effectively.
This is extra text to test this more effectively.
</h4>
<div>
This div has a solid red border (because of rule "div {border: solid red;}".  However,
<strong>these strong words, which may take up most of a line,</strong>
have a border of (initial values of individual properties)(no specific CSS rules applied to
"strong" element), because the border
property does not inherit.  So the border property does apply to the div and strong elements.
This is extra text to test this more effectively.
This is extra text to test this more effectively.
This is extra text to test this more effectively.
This is extra text to test this more effectively.
This is extra text to test this more effectively.
This is extra text to test this more effectively.
This is extra text to test this more effectively.
This is extra text to test this more effectively.
This is the end of the div.
</div>
<blockquote>
This blockquote element should have a UA-default border.  The
nonsensical rule "blockquote {border: 200%}" should be ignored,
but the border property does apply to the blockquote element.
This is extra text to test this more effectively.
This is extra text to test this more effectively.
This is extra text to test this more effectively.
This is extra text to test this more effectively.
This is extra text to test this more effectively.
This is extra text to test this more effectively.
This is extra text to test this more effectively.
This is extra text to test this more effectively.
</blockquote>
<p>
All other properties of this page should be UA-default.
This is a paragraph, like the one above.  
</p>

</body>
</html>
